事件修飾符號

學習事件修飾符號前，要先來回顧一下DOM事件的傳遞原理。
當頁面觸發一個點擊事件時，事件會從父元件開始依次傳遞至子元件，這個過程通常形象地稱為事件捕捉，當事件傳遞到最上層的子元件時，其還會逆向地在進行一輪傳遞，從子元件依次向下傳遞，這個過程被稱為事件反昇．在Vue中使用＠click的方式綁定事件時，預設監聽的是DOM事件的反昇階段，即從子元件傳遞到父元件的過程。

• 事件範例元件：

<div @click="click1" style="border:solid red">
    外層
    <div @click="click2" style="border:solid red">
        中層
        <div @click="click3" style="border:solid red">
            點擊
        </div>
    </div>
</div>

• 實現3個綁定的函數：

methods: {
    click(step) {
        this.count += step
    },
    log (event) {
        console.log(event)
    },
    click1() {
        console.log("外層")
    },
    click2() {
        console.log("中層")
    },
    click3() {
        console.log("內層")
    }        
}

• 執行這個程式，點擊頁面最內層的元素，透過觀察主控台的列印可看到事件函數的呼叫順序為：
  內層
  中層
  外層
• 如果想監聽捕捉階段的事件，就需使用事件修飾符號，其中capture可以將監聽事件的時機設定為捕捉階段：

<div @click.capture="click1" style="border:solid red">
    外層
    <div @click.capture="click2" style="border:solid red">
        中層
        <div @click.capture="click3" style="border:solid red">
            點擊
        </div>
    </div>
</div>

• 再次執行後，點擊最內層的元素，可看到主控台的列印效果為：
  外層
  中層
  內層

• 捕捉事件觸發的順序正好是反昇事件的相反。在實際運用中，可以根據具體需求選擇要使用反昇事件還是捕捉事件。

• 今天內容就先到這邊，明天接著講某些場境不希望事件進行傳遞的狀況！